<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="listQuery" :model="listQuery" :inline="true">
        <el-form-item label="项目名称" prop="title">
          <el-input
            v-model="listQuery.title"
            placeholder="请输入项目名称"
            clearable
            size="small"
            style="width: 180px"
            @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="getList"
          >搜索</el-button>
          <el-button
            icon="el-icon-refresh"
            size="small"
            @click="resetQuery"
          >重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        stripe
        :data="ticketList"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="#" type="index" width="80" align="center" />
        <el-table-column
          label="项目名称"
          prop="title"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="上报时间"
          align="center"
          prop="create_time"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="项目分类"
          :show-overflow-tooltip="true"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <span>
              {{ formatProjectClassify(scope.row.form_data) }}
            </span>
          </template>
        </el-table-column> -->

        <el-table-column
          label="负责人"
          :show-overflow-tooltip="true"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{ formatLeaderName(scope.row.form_data) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="填报人"
          :show-overflow-tooltip="true"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createUsers }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收费价格开通日期"
          align="center"
          prop="complete_time"
          width="200"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.complete_time, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="最后一次阶段评审日期"
          align="center"
          prop="complete_time"
          width="200"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.ProjectAnnuals.length > 0">{{
              parseTime(
                scope.row.ProjectAnnuals[0].complete_time,
                "{y}-{m}-{d}"
              )
            }}</span>
            <span v-else>无阶段评审记录</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="180"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              v-permisaction="['xjsxxm:annual:issued']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleView(scope.row)"
            >阶段评审下发</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <ApplyDialog ref="applyDialog" @refreshTable="getList" />
  </div>
</template>

<script>
import { workOrderList } from '@/api/xjs/ns-order'
import { listAllUser } from '@/api/system/sysuser'
// 搜索
import ApplyDialog from './components/applyDialog'
export default {
  components: { ApplyDialog },
  data() {
    return {
      users: [],
      nodeList: [],
      dialogVisible: false,
      queryParams: {},
      userMap: {},
      nodeName: '',
      total: 0,
      loading: false,
      ticketList: [],
      listQuery: {
        page: 1,
        per_page: 10
      },
      ruleForm: {
        work_order_id: '',
        node_id: '',
        user_id: '',
        remarks: ''
      },
      rules: {
        node_id: [{ required: true, message: '请选择节点', trigger: 'change' }],
        user_id: [{ required: true, message: '请选择用户', trigger: 'change' }]
      }
    }
  },
  created() {},
  mounted() {
    this.initUsers()
  },
  methods: {
    initUsers() {
      listAllUser({}).then(response => {
        this.users = response.data
        for (let i = 0; i < this.users.length; i++) {
          const user = this.users[i]
          this.userMap[`${user.userId}`] = user.nickName
        }
        this.getList()
      })
    },
    formatLeaderName(val) {
      const jsonObj = JSON.parse(val)
      return this.userMap[jsonObj['leader_name']]
    },
    changeType(val) {
      this.getList()
    },
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQuery')
      this.getList()
    },
    formatProjectClassify(val) {
      const jsonObj = JSON.parse(val)
      return jsonObj['project_classify']
    },
    formatProjectLeader(val) {
      const jsonObj = JSON.parse(val)
      return jsonObj['leader_name']
    },
    getList() {
      this.loading = true
      this.listQuery.page = this.queryParams.pageIndex
      this.listQuery.per_page = this.queryParams.pageSize

      this.listQuery.classify = 6

      workOrderList(this.listQuery).then(response => {
        this.ticketList = response.data.data
        this.queryParams.pageIndex = response.data.page
        this.queryParams.pageSize = response.data.per_page
        this.total = response.data.total_count
        this.loading = false
      })
    },
    handleSearch(val) {
      for (var k in val) {
        this.listQuery[k] = val[k]
      }
      this.getList()
    },

    handleView(row) {
      this.$refs.applyDialog.open(row, this.users)
    },
    handleSelectionChange() {},
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          inversionWorkOrder(this.ruleForm).then(response => {
            if (response.code === 200) {
              this.getList()
              this.dialogVisible = false
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped></style>
